<template>
  <div class="app-container">
    <!-- 对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="shipOrder" v-loading="formLoading" label-width="100px">
        <el-form-item label="发货单号" prop="shipOrderCode">
          {{shipOrder.shipOrderCode}}
        </el-form-item>
        <el-form-item label="指派给" prop="assignUserId">
          <el-select v-model="shipOrder.assignUserId" placeholder="请选择任务指派给谁" clearable>
            <el-option v-for="user in userList" :key="user.id" :label="user.nickname" :value="user.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createPickTask" :disabled="formLoading" size="small">创建拣货任务</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {listSimpleUsers} from "@/api/system/user";
import store from "@/store";
import {createPickTask} from "@/api/hs/picktask";

export default {
  name: "CreatePickTask",
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 重新渲染表格状态
      refreshTable: true,
      // 表单的加载中
      formLoading: false,
      // 出库单信息
      shipOrder: {},
      // 拣货任务指派给
      userList: [],
    };
  },
  methods: {
    /** 打开弹窗 */
    async open(shipOrderCode) {
      await this.getUserList();
      this.shipOrder = {
        shipOrderCode: shipOrderCode,
        assignUserId: 0, // 默认值
      };
      this.dialogVisible = true;
      this.dialogTitle = "创建拣货任务";
    },
    /** 查询用户列表 */
    async getUserList() {
      let query = {
        warehouseId: store.getters.warehouseId,
      };
      await listSimpleUsers(query).then(res => {
        this.userList = res.data;
      });
      this.userList.push({
        id: 0,
        nickname: "所有人"
      });
    },
    /** 创建拣货任务 */
    createPickTask() {
      this.formLoading = true;
      createPickTask(this.shipOrder).then(res => {
        this.$message.success("创建拣货任务成功");
        this.dialogVisible = false;
      }).finally(() => {
        this.formLoading = false;
        this.$emit('success');
      })
    },
  }
}
</script>
<style scoped lang="scss">
</style>
